<template>
  <nav-bar class="detail-nav-bar">
    <div class="title" slot="center">
      <div
        class="title-item"
        v-for="(item,index) in titles"
        :key="item.index"
        @click="titleItemClick(index)"
        :class="{activeClass:index === currentIndex }"
      >
        {{ item }}
      </div>
    </div>
    <div slot="left" @click="back" class="back">
        <img src="~assets/img/common/back.svg" alt="退后">
    </div>
  </nav-bar>
</template>

<script>
import NavBar from "../../../components/common/navbar/NavBar.vue";
export default {
  name:'detailNavbar',
  components: { NavBar },
  data() {
    return {
      titles: ["商品", "参数", "评论", "推荐"],
      currentIndex: 0,
    }
  },
  methods: {
    titleItemClick(index) {
      this.currentIndex = index;
      this.$emit('navbarClick',index)
    },
    back(){
        this.$router.back();
    }
  }
};
</script>

<style scoped>
.detail-nav-bar{
  z-index: 999;
}
.title {
  display: flex;
  font-size: 15px;
  flex: 1;
}
.title-item {
  flex: 1;
}
.activeClass{
    color: rgb(245, 199, 190);
}
.back{
    position: fixed;
    top: 4.7px;
    left: 25px;
}
.back img{
    width: 18px;
    height: 18px;
}
</style>
